<style scoped>
.filter {
    padding-bottom:20px;
}
</style>

<template>
    <div class="com-manage">
        <product-title></product-title>
        <!-- 筛选 -->
        <div class="filter">
            <Row>
                <Col offset='22' span="3">
                <Button v-if="userType" type="primary" @click="addCom">新增</Button>
                </Col>
            </Row>
        </div>
        <!-- 列表 -->
        <div class="cate-list">
            <Table stripe highlight-row :columns="columns" :data="comList"></Table>
        </div>
        
        <!-- 添加公司的modal -->
        <Modal v-model="showAdd" :loading="loading" title="添加合作商" :mask-closable=false  @on-ok="saveCompany('editObject')" @on-cancel="cancel('editObject')">
            <Row>
                <Col span="20" offset="1">
                <Form :model="editObject" ref="editObject" :rules="ruleValidate" :label-width="80">
                    <Form-item label="公司：" prop="cid">
                        <Select v-model="editObject.cid" filterable @on-change="companyChange($event)"  placeholder="请选择公司">
                            <Option :value="key" v-for="(vaule,key) in allComList" :key="key" >{{vaule.name}}</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="全称：" prop="name">
                        <Input v-model="editObject.name" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="简称：" prop="shortn">
                        <Input v-model="editObject.shortn" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="状态：">
                        <Select v-model="editObject.status"  placeholder="状态">
                            <Option v-for="item in status" :value="item.value" :key="item.value">{{item.label}}</Option>                            
                        </Select>
                    </Form-item>
                </Form>
                </Col>
            </Row>
        </Modal>
        <!-- 编辑公司的modal -->
        <Modal v-model="showEdit" :loading="loading" title="编辑合作商" :mask-closable=false  @on-ok="saveCompany('edititems')" @on-cancel="cancel('edititems')">
            <Row>
                <Col span="20" offset="1">
                <Form :model="edititems" ref="edititems" :rules="ruleValidate" :label-width="80">
                    <Form-item label="公司：" prop="cid">
                        <Select :value="edititems.cid" disabled filterable   placeholder="请选择公司">
                            <Option :value="key" v-for="(item,key) in allComList" :key="key" >{{item.name}}</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="全称：" prop="name">
                        <Input v-model="edititems.name" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="简称：" prop="shortn">
                        <Input v-model="edititems.shortn" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="状态：">
                        <Select v-model="edititems.status"  placeholder="状态">
                            <Option v-for="item in status" :value="item.value" :key="item.value">{{item.label}}</Option>                            
                        </Select>
                    </Form-item>
                </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>
<<script>
import productTitle from '../../components/productTitle';
import { getCompany } from '../../api/product_v2';
import { getComlist,saveCom,updateCom,delCom } from '../../api/parter';
export default {
    data () {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('公司不能为空'));
            } else {
                    callback();
            }
        };
        return {
            user_type:0,
            page:1,
            pagesize:10,
            listTotal:0,
            loading: true,
            searchForm:{},
            columns: [
                    {
                        type: 'index',
                        title:'序号',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '简称',
                        key: 'shortn',
                        align: 'center'
                    },
                    {
                        title: '状态',
                        key: 'statustext',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        disabled:params.row.show_edit
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editCom(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        disabled:params.row.show_edit
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
            comList: [],
            showAdd:false, //控制编辑modal的显示
            showEdit:false,
            editObject:{
                name:"",
                cid:"",
                shortn:"",
                status:1,
            },
            edititems:{
                name:"",
                cid:"",
                shortn:"",
                status:1,
                id:''               
            },
            allComList:{},
            status:[
                {
                    value:1,
                    label:"正常"
                },
                {
                    value:2,
                    label:"暂停"
                },{
                    value:3,
                    label:"未启动"
                }
            ],
            ruleValidate:{
                cid:[
                    { required: true, message: '公司不能为空', trigger: 'blur,change' }
                ],
                name:[
                    { required: true, message: '公司全程不能为空', trigger: 'blur,change' }
                ],               
                shortn:[
                    { required: true, message: '公司简称不能为空', trigger: 'blur,change' }
                ],               
            }
        };
    },
    components: {
        productTitle,
    },
    created(){
        this.getList();
        this.getAllcompany();
    },
    computed:{
        userType() {
            if(this.$store.state.user.user_type == 1){
                this.user_type = 1
                return true
            }else{
                this.user_type = 2
                return false
            }
        }

    },
    methods: {
        getAllcompany() {           
            new Promise((resolve, reject) => {
                getCompany().then(response => {
                    console.log(response.data)
                    if(response.data.err == 0){
                        this.allComList = response.data.data
                    } else {
                        this.$Message.error(response.data.info);
                    }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        companyChange(value) { 
            if(value){
                this.editObject.cid = value
                this.editObject.name =  this.allComList[value].name
                this.editObject.shortn =  this.allComList[value].shortn
            }          
            
        },
        companyEditChange(value){
            if(value){
                this.edititems.cid = value
                this.edititems.name =  this.allComList[value].name
                this.edititems.shortn =  this.allComList[value].shortn
            } 
        },
        saveCompany(name) {
            this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(name == 'editObject'){
                            new Promise((resolve, reject) => {
                                saveCom(this.editObject).then(response => {
                                    console.log(response.data)
                                    if(response.data.err == 0){
                                        this.showAdd = false;
                                        this.loading = true;
                                        this.$Message.success('提交成功!');
                                        this.handleReset('editObject')
                                        this.getList()
                                    } else {
                                        this.$Message.error(response.data.info);
                                        setTimeout(() => {
                                            this.loading = false;
                                            this.$nextTick(() => {
                                                this.loading = true;
                                            });
                                        }, 2000);
                                    }                       
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                });
                            });
                        }else{
                            new Promise((resolve, reject) => {
                                updateCom(this.edititems).then(response => {
                                    console.log(response.data)
                                    if(response.data.err == 0){
                                        this.showEdit = false;
                                        this.loading = true;
                                        this.$Message.success('提交成功!');                                       
                                        this.getList()
                                    } else {
                                        this.$Message.error(response.data.info);
                                        setTimeout(() => {
                                            this.loading = false;
                                            this.$nextTick(() => {
                                                this.loading = true;
                                            });
                                        }, 2000);
                                    }                       
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                });
                            });
                        }                                              
                    } else {

                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 2000);
                    }
                })           
        },
        addCom(){
            this.showAdd = true;
        },
        editCom(index){
            this.showEdit = true
            this.edititems.name = this.comList[index].name
            this.edititems.cid =  this.comList[index].cid+''
            this.edititems.shortn = this.comList[index].shortn
            this.edititems.status= this.comList[index].status
            this.edititems.id = this.comList[index].id
        },
        getList(){
            new Promise((resolve, reject) => {
                getComlist().then(response => {
                    console.log(response.data)
                    if(response.data.err == 0){
                        this.comList = []
                        //this.listTotal = response.data.data.total;
                        response.data.data.forEach(function(value,index) {
                            var e = {
                                "name": value.name,
                                "shortn":value.shortn,
                                "status":value.status,
                                "statustext":this.status[(value.status-1)].label,                               
                                "cid":value.cid,
                                "id":value.id,
                                "show_edit":value.show_edit
                            }
                            this.comList.push(e);
                        }, this);  
                   } else {
                       this.$Message.error(response.data.info);
                   }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getDetail(params){
            new Promise((resolve, reject) => {  
                getComDetail(params).then(response => {
                    let data = response.data;
                    if(data.err == 0){
                        this.editObject.name = data.data.name;
                        this.editObject.pid = data.data.pid;
                        this.editObject.logo = data.data.logo;
                        this.editObject.id = data.data.id;
                        this.editObject.yun_id = data.data.yun_id;
                    }                         
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        remove (index) {
            // this.data6.splice(index, 1);
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该条记录?',
                onOk: () => {
                    let params = {
                        'id':this.comList[index].id,
                    }
                    this.delCom(params);
                },
            });
            
        },
        clearEditData(){
            this.editObject.index = ''
            this.editObject.cid = ''
            this.editObject.name = ''
            this.editObject.shortn = ''
            this.editObject.status = 1          
        },
        ok() {
            this.saveCom(this.editObject); 
        },
        cancel(name) {
            this.showAdd = false
            this.clearEditData();
            this.handleReset(name)
        },
        handleReset (name) {
                this.$refs[name].resetFields();
        },
        delCom(value){
            new Promise((resolve, reject) => {
                delCom(value).then(response => {
                    if(response.data.err==0){
                           this.$Message.success(response.data.info);     
                           this.getList();                     
                    }else{
                        this.$Message.error(response.data.info);  
                    }                             
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        pageChange(page) {
            this.page = page
            this.getList()

        },
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getList()
        },
    }
};
</script>
